<template>
  <div class="title">
    <div class="name">
      {{ data.name }}
    </div>
    <div class="time">
      <i class="iconfont icon-shijian1"></i>总时长 {{ data.time }}
      <i class="iconfont icon-nandukong-copy"></i>难度系数 {{ data.difficulty }}
    </div>
  </div>
  <div class="pic">
    <img :src=data.image alt="">
  </div>
  <div class="ingredient">
    <div class="ingredient-title">
      食材准备
    </div>
    <div class="sort">
      <div class="ingredient-main">
        <p>主料</p>
        <div v-for="key in Object.keys(data.material)" :key="key" class="item">
          <div class="name">{{ key }}</div>
          <div class="amount">{{ data.material[key] }}</div>
        </div>
      </div>
      <div class="ingredient-taste">
        <p>调味料</p>
        <div v-for="key in Object.keys(props.msg.flavor)" class="item">
          <div class="name">{{ key }}</div>
          <div class="amount">{{ props.msg.flavor[key] }}</div>
        </div>
      </div>
    </div>
  </div>
  <div class="step">
    <div class="step-title">烹饪步骤</div>
    <div v-for="item in data.steps" class="step-container">
      <div class="step-item">
        <div class="step-number">{{ item.step }}</div>
        <div class="step-content">
          <div class="picture">
            <img :src=item.img_url alt="">
          </div>
          <p>{{ item.name }}</p>
          <div class="desc">{{ item.description }}</div>
          <div class="time-temp">
            <div class="mount">
              <i class="iconfont icon-shijian1"></i>{{ item.time }}
            </div>
            <div class="temp">
              <i class="iconfont icon-wendu"></i>{{ item.temp }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="tips">
    <div class="tips-title">
      烹饪小贴士
    </div>
    <div class="tips-container">
      <p v-for="item in data.tips"><i class="iconfont icon-weibiaoti-"></i>{{ item.description }}</p>
    </div>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'

const data = ref({})
const props = defineProps({
  msg: {
    type: Object,
    required: true
  }
})
data.value = props.msg


</script>

<style lang="less" scoped>
.title {
  background-color: #FFFFFF;
  height: 2.4rem;
  width: 100%;
  padding: 16px;
  box-sizing: border-box;

  .name {
    font-weight: 600;
    font-size: 0.54rem;
    color: #000000;
    line-height: 28px;
  }

  .time {
    display: flex;
    align-items: center;
    margin-top: 13px;
    font-weight: 400;
    font-size: 0.373rem;
    color: #6B7280;

    i {
      margin-right: 5px;
    }

    .icon-nandukong-copy {
      margin-left: 20px;
    }
  }
}

.pic {
  padding: 16px;
  width: 9.15rem;
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
  overflow: hidden;

  img {
    width: 100%;
    height: auto;

    border-radius: 8px;
  }
}

.ingredient {
  margin: 16px;
  padding: 16px;
  box-sizing: border-box;
  width: 9.15rem;
  background-color: #fff;
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
  border-radius: 8px;

  .ingredient-title {
    font-weight: 500;
    font-size: 0.48rem;
    color: #000000;
    line-height: 28px;
  }

  .sort {
    display: flex;
    justify-content: space-between;

    font-weight: 500;
    font-size: 0.373rem;
    color: #000000;
    line-height: 21px;

    p {
      display: block;
    }

    .item {
      display: flex;
      justify-content: space-between;
      font-weight: 400;
      color: #4B5563;
      margin-top: 8px;
    }

    .ingredient-main {
      padding: 12px;
      box-sizing: border-box;
      width: 3.8rem;
    }

    .ingredient-taste {
      padding: 12px;
      box-sizing: border-box;
      width: 3.8rem;
    }
  }
}

.step {
  margin: 16px;
  padding: 16px;
  box-sizing: border-box;
  background: #FFFFFF;
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
  border-radius: 8px;

  .step-title {
    font-weight: 500;
    font-size: 0.48rem;
    color: #000000;
    line-height: 28px;
  }

  .step-container {
    .step-item {
      margin-top: 28px;
      display: flex;
      justify-content: space-between;

      &:first-child {
        margin-top: 16px;
      }
    }

    .step-number {
      height: 32px;
      width: 32px;
      background-color: #E5E7EB;
      text-align: center;
      line-height: 32px;
      font-weight: 400;
      font-size: 0.373rem;
      color: #4B5563;
      border-radius: 50%;
    }

    .step-content {
      width: 7rem;

      .picture {
        width: 100%;

        img {
          width: 100%;
        }
      }
    }

    p {
      margin-top: 12px;
      font-weight: 500;
      font-size: 0.44rem;
      color: #000000;
    }

    .desc {
      font-family: Roboto, Roboto;
      margin-top: 8px;
      font-weight: 400;
      font-size: 0.35rem;
      color: #4B5563;
      line-height: 20px;
    }

    .time-temp {
      margin-top: 8px;
      display: flex;
      color: #6B7280;
      font-size: 0.373rem;

      .mount,
      .temp {
        display: flex;
        align-items: center;
        margin-right: 15px;

        i {
          margin-right: 3px;
        }
      }
    }
  }
}

.tips {
  margin: 16px;
  padding: 16px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);

  .tips-title {
    font-weight: 500;
    font-size: 18px;
    color: #000000;
    margin-bottom: 14px;
  }

  .tips-container {
    font-size: 14px;
    color: #4B5563;

    p {
      margin-bottom: 8px;
      line-height: 20px;

      i {
        margin-right: 5px;
      }
    }
  }
}
</style>